<template>
  <div class="page-header">
    <h1 class="page-title">本站资源列表</h1>
    <img class="page-cover" src="https://ik.imagekit.io/nicexl/Wallpaper/ba41a32b219e4b40ad055bbb52935896_Y0819msuI.jpg"
      alt="">
    <!-- 波浪 -->
    <Waves></Waves>
  </div>
  <div class="bg">
    <div class="page-container">
      <el-container>  
        <el-header>  
          <el-input  
            placeholder="请输入资源名"  
            v-model="searchQuery"  
            clearable  
            @clear="handleClear"  
          >    
          </el-input> 
          <div class="center-text">  
            本站所有资源默认密码均为：xiaosongshu  
          </div> 
        </el-header>  
        <el-main>  
          <el-table  
            :data="ziyuanList"  
            style="width: 100%"  
          >    
            <el-table-column  
              type="index"  
              label="序号"
              width="60">  
            </el-table-column> 
            <el-table-column  
              prop="name"  
              label="资源名称"  
            ></el-table-column>  
            <el-table-column  
              prop="weblink"  
              label="链接"  
            ></el-table-column> 
          </el-table>  
      
          <el-pagination  
            @size-change="handleSizeChange"  
            @current-change="handleCurrentChange"  
            :current-page="currentPage"  
            :page-sizes="[100, 200, 500]"  
            :page-size="pageSize"  
            layout="total, sizes, prev, pager, next, jumper"  
            :total="count"  
          ></el-pagination>  
        </el-main>  
      </el-container>  
    </div>
  </div>
</template>

<script setup lang="ts">
import { getZiyuanList } from '@/api/ziyuan';
import { Ziyuan } from '@/api/ziyuan/types';
import { ref, watch } from 'vue';  
import { PageQuery } from '@/model';
  
  const data = reactive({
    count: 0,
    queryParams: {
      current: 1,
      size: 100,
    } as PageQuery,
    ziyuanList: [] as Ziyuan[],
  });
  const {
    count,
    queryParams,
    ziyuanList,
  } = toRefs(data); 
    
  const searchQuery = ref('');  
  const currentPage = ref(1);  
  const pageSize = ref(100);
    
    
  // 搜索函数  
  const search = () => {   
    let params = {      
      current: currentPage.value,
      size: pageSize.value,
      searchkey: searchQuery.value,
    }
    getZiyuanList(params).then(({ data }) => {
      ziyuanList.value = data.data.recordList;
      count.value = data.data.count;
    });
  };  
    
  // 清除搜索  
  const handleClear = () => {  
    searchQuery.value = '';  
    search();  
  };  
    
  // 分页大小改变时的处理  
  const handleSizeChange = (val: number) => {  
    pageSize.value = val;  
    search();
  };  
    
  // 当前页码改变时的处理  
  const handleCurrentChange = (val: number) => {  
    currentPage.value = val; 
    search(); 
  };  
    
  // 监听 searchQuery 的变化以进行搜索  
  watch(searchQuery, () => {  
    if (searchQuery.value) {
      currentPage.value = 1; // 重置为第一页  
      search();  
    }  
  });  

  onMounted(() => {  
    getZiyuanList(queryParams.value).then(({ data }) => {
      ziyuanList.value = data.data.recordList;
      count.value = data.data.count;
    });
  });
    
  // 暴露给模板的变量和函数  
  defineExpose({  
    searchQuery,  
    currentPage,  
    pageSize, 
    search,  
    handleClear,  
    handleSizeChange,  
    handleCurrentChange,  
  }); 
</script>

<style lang="scss" scoped>
.center-text {  
  /* 使用 Flexbox 居中 */  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中（如果内容是多行的，可能需要其他方法）*/  
  margin-top: 10px; /* 根据需要添加一些上边距 */  
}  
</style>